<template>
  <div class="order-header">
    <div class="header">
      <div
        class="num-ordering tol"
        v-for="(item, index) in mealList.list"
        :key="index"
      >
        <h3>{{ item.meal }} <small> ({{item.price}}元 )</small> </h3>
        <div class="goods">
          <p>
            <span>{{ item.good1 }}</span>
          </p>
          <p>
            <span>{{ item.good2 }}</span>
          </p>
          <p>
            <span>{{ item.good3 }}</span>
          </p>
          <p>
            <span>{{ item.good4}}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="data">今日推荐</div>
    <div class="meal-management" @click="mealMan">菜品管理</div>
  </div>
</template>

<script setup>
import axios from "axios";
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import "../../mock/orderMock";
let router = useRouter();
let mealList = reactive({ list: [] });
onMounted(() => {
  axios.get("/api/meal/item").then((res) => {
    mealList.list = res.data.melist;
   
  });
});
let mealMan = () => {
  router.push("/index/mealManage");
};
</script>

<style scoped lang="scss">
.order-header {
  margin: 40px 0 0 20px;
  background: rgba(228, 228, 228, 0.8);
  height: 172px;
  display: flex;
  position: relative;
  .header {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    color: #666666;
    align-items: center;
    .tol {
      width: 156px;
      height: 114px;
      background: #fff;
      border-radius: 5px;
      font-size: 14px;
      text-align: center;
      h3 {
        padding-top: 10px;
        color:red;
        small{
          color: red;
        }
      }
      .goods {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        font-weight: 600;
        p {
          padding: 8px 0;
          width: 60px;
        }
      }
    }
  }
  .data {
    position: absolute;
    width: 141px;
    height: 41px;
    background: rgba(204, 0, 0, 0.807843137254902);
    color: #fff;
    text-align: center;
    line-height: 41px;
    font-weight: bold;
    top: -20px;
    left: 20px;
    border-radius: 5px;
  }
  .meal-management {
    position: absolute;
    right: 50px;
    top: 10px;
    font-size: 14px;
    color: #666666;
  }
  .meal-management:hover {
    color: darkgray;
    cursor: pointer;
  }
}
</style>